<template>
  <div
    class="home-page"
    v-infinite-scroll="loadMore"
    :infinite-scroll-immediate="false"
    :infinite-scroll-disabled="loading || !hasMore">
    <!-- 搜索 -->
    <div class="bg-[#fff] px-[24px] py-[16px] sticky top-0 z-10">
      <!-- 产品标题区域 -->
      <div class="mt-[0px] flex items-center gap-[24px]">
        <svg
          @click="goBack"
          class="cursor-pointer flex-shrink-0"
          width="32"
          height="32"
          viewBox="0 0 32 32"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <path
            d="M11.293 8.89258C11.6835 8.50247 12.3166 8.50224 12.707 8.89258C13.0972 9.28299 13.0971 9.91615 12.707 10.3066L8.0127 15H20.5029L20.6045 15.0049C21.1089 15.0559 21.5029 15.4821 21.5029 16C21.5029 16.5178 21.1089 16.9441 20.6045 16.9951L20.5029 17H8.01465L12.707 21.6924C13.0973 22.0828 13.097 22.7159 12.707 23.1064C12.3165 23.4969 11.6835 23.4969 11.293 23.1064L4.89258 16.707C4.50217 16.3166 4.50227 15.6835 4.89258 15.293L11.293 8.89258ZM25.5996 8.59961C26.1518 8.59961 26.5995 9.0474 26.5996 9.59961V22.3994C26.5996 22.9517 26.1519 23.3994 25.5996 23.3994C25.0474 23.3994 24.5996 22.9517 24.5996 22.3994V9.59961C24.5997 9.04744 25.0474 8.59967 25.5996 8.59961Z"
            fill="#222222" />
        </svg>
        <div
          class="flex items-center gap-[8px] h-[40px] bg-[#EDEDED] rounded-[52px] w-[400px] pl-[24px] pr-[6px]">
          <input
            v-model="search_text"
            @keyup.enter="startSearch"
            type="text"
            placeholder="What are you looking for?"
            class="w-full h-full outline-none text-[15px] font-[400] text-[#222222] placeholder-[#7A7A7A] bg-[#EDEDED]" />
          <svg
            @click="startSearch"
            class="cursor-pointer flex-shrink-0"
            width="32"
            height="32"
            viewBox="0 0 32 32"
            fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <rect width="32" height="32" rx="16" fill="#F76B1B" />
            <path
              d="M15.583 8.58301C19.4489 8.58301 22.5828 11.7172 22.583 15.583C22.583 17.3522 21.9252 18.9668 20.8428 20.1992L24.4473 23.8037C24.7397 24.0966 24.74 24.5715 24.4473 24.8643C24.1545 25.1568 23.6796 25.1566 23.3867 24.8643L19.7383 21.2158C18.576 22.0746 17.139 22.583 15.583 22.583C11.7172 22.5828 8.58301 19.4489 8.58301 15.583C8.58318 11.7173 11.7173 8.58318 15.583 8.58301ZM15.583 10.083C12.5457 10.0832 10.0832 12.5457 10.083 15.583C10.083 18.6205 12.5456 21.0828 15.583 21.083C18.6206 21.083 21.083 18.6206 21.083 15.583C21.0828 12.5456 18.6205 10.083 15.583 10.083Z"
              fill="white" />
          </svg>
        </div>
      </div>
    </div>

    <Product
      :products="products"
      :loading="loading"
      :loadMoreLoading="loadMoreLoading"
      :hasMore="hasMore" />

    <FloatActions />
  </div>
</template>

<script setup lang="ts">
  import Product from '@/views/home/components/product.vue';
  import { ref, onMounted, watch } from 'vue';
  import { FeedsAPI, type FeedItem, type FeedsParams } from '@/api/feeds';
  import request from '@/utils/request';
  import { useRouter, useRoute } from 'vue-router';

  const router = useRouter();
  const route = useRoute();

  // 分页相关数据
  const loading = ref(false);
  const loadMoreLoading = ref(false);
  const start = ref(0);
  const hasMore = ref(true);

  // 搜索相关数据
  const search_text = ref('');
  const products = ref<FeedItem[]>([]);

  // 从路由参数获取搜索关键词
  onMounted(() => {
    const searchQuery = route.query.q as string;
    if (searchQuery) {
      search_text.value = searchQuery;
      startSearch();
    }
  });

  // 返回上一页
  const goBack = () => {
    router.back();
  };

  // 开始搜索
  const startSearch = () => {
    if (!search_text.value.trim()) {
      return;
    }

    start.value = 0;
    products.value = [];
    loadProducts(false);
  };

  const loadMore = async () => {
    if (!hasMore.value || loading.value) {
      return;
    }
    loadProducts(true);
  };

  // 实际的数据获取函数
  const loadProducts = async (isLoadMore = false) => {
    try {
      if (isLoadMore) {
        loadMoreLoading.value = true;
      } else {
        loading.value = true;
      }

      const params: FeedsParams = {
        start: start.value,
        size: 30,
        search_text: search_text.value.trim() || undefined,
      };

      let apiUrl = '/feeds/search';
      const response = await request.post(apiUrl, params);

      if (response.code == 200 && response.data.feeds && response.data.feeds.length > 0) {
        if (isLoadMore) {
          products.value = [...products.value, ...response.data.feeds];
        } else {
          products.value = response.data.feeds;
        }
      }
      start.value = response.data.next_start;
      hasMore.value = response.data.has_more;
    } catch (error) {
      console.error('加载产品数据失败:', error);
    } finally {
      loading.value = false;
      loadMoreLoading.value = false;
    }
  };
</script>

<style scoped lang="scss">
  .home-page {
    width: 100%;
    min-height: 100vh;

    background: white;
  }

  .home-top {
    display: flex;
    gap: 24px;
    padding: 24px;
    padding-bottom: 8px;
  }

  .top-container {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
  }

  .search-input-wrapper {
    position: relative;
    width: 100%;
  }

  .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9ca3af;
    z-index: 1;
    pointer-events: none;
  }

  .search-input {
    width: 100%;
    height: 48px;
    padding: 12px 16px 12px 48px;
    border: 2px solid #ededed;
    border-radius: 8px;
    font-size: 16px;
    background: #ededed;
    transition: all 0.3s ease;
    outline: none;

    &:focus {
      box-shadow: 0 0 0 3px rgba(245, 245, 245, 1);
    }

    &::placeholder {
      color: #7a7a7a;
    }
  }

  .clear-search-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #9ca3af;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;

    &:hover {
      background: #6b7280;
      transform: translateY(-50%) scale(1.1);
    }
  }

  .search-loading {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    z-index: 2;
  }

  .get-started-btn {
    padding: 12px 24px;
    color: #222;
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 15px;
    &:hover {
      color: #7a7a7a;
    }
  }
  .show_search_tips {
    margin-left: 24px;
    color: var(---9, #222);
    font-family: 'Inter Tight';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    .search_text_color {
      color: #7a7a7a;
    }
  }
</style>
